<template>
  <div class="row">
    <h1 v-if="success">欢迎光临</h1>
    <h1 v-else-if="loading">正在加载中</h1>
    <h1 v-else-if="error">{{ error }}</h1>
    <div v-else class="card" v-for="item in card" :key="item.id">
      <a :href="item.avatar_url" target="_blank">
        <img :src="item.avatar_url" style="width: 100px" />
      </a>
      <p class="card-text">xxxxxx</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Main",
  data() {
    return {
      success: true,
      loading: false,
      error: false,
      card: [],
    };
  },
  mounted() {
    this.$bus.$on(
      "sendMsg",
      (keyword) => {
        this.success = false;
        this.loading = true;
        axios({
          url: "https://api.github.com/search/users?",
          params: {
            q: keyword,
          },
        }).then((res) => {
          // 请求成功
          this.loading = false;
          console.log(res);
          this.card = res.data.items.map((item) => {
            return {
              url: item.avatar_url,
              id: item.id,
              login: item.login,
              avatar_url: item.avatar_url,
            };
          });
        });
      },
      (err) => {
        // 请求失败
        this.loading = false;
        console.log(err);
        this.error = err.message;
      }
    );
  },
};
</script>

<style scoped>
.card {
  float: left;
  width: 33.333%;
  padding: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: 0.75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
</style>
